<template>
	<view class="house_details_sale">
		<!-- 标题区 -->
		<view class="sale_data">
			<text class="sa_data_tit">
				{{houseInfo.title}}
			</text>
			<view class="sa_data_notice">
				<text>{{houseInfo.created_at}}发布于{{houseInfo.city}}</text>
				<text style="color: #FF765B;">{{houseInfo.updated_at}}更新</text>
			</view>
			<view class="sa_tag_info">
				<view class="sa_tag_info_item" >
					<text>{{houseInfo.money}}</text>
					<text>价格(元)</text>
				</view>
				<view class="sa_tag_info_item" >
					<text>{{houseInfo.room}}室{{houseInfo.hall}}厅{{houseInfo.toilet}}卫</text>
					<text>户型</text>
				</view>
				<view class="sa_tag_info_item" >
					<text>{{houseInfo.area}}㎡</text>
					<text>产权面积</text>
				</view>
			</view>
		</view>
		<!-- banner -->
		<view class="sale_banner">
			<swiper class="swiper" @change="changeSwiper">
				<swiper-item v-for="(item,n) in houseInfo.imgarr" :key="item" >
					<view class="swiper-item uni-bg-red">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item> 
			</swiper>
			<view class="sale_page">
				<text>{{currentNum}}</text>/<text>{{houseInfo.imgarr.length}}</text>
			</view>
		</view>
		<!-- 基本信息 -->
		<view class="essential_info">
			<text class="ess_info_tit">基本信息</text>
			<view class="ess_lnfo_list">
				<view class="ess_lnfo_item" >
					<text style="margin-right: 22rpx;">单价</text>
					<text>{{houseInfo.metre_money}}元/㎡</text>
				</view>
				<view class="ess_lnfo_item" >
					<!-- <text style="margin-right: 22rpx;">单价</text> -->
					<text  style="color: #3FB1FA;">挂牌价格解析</text>
				</view>
				<view class="ess_lnfo_item" >
					<text style="margin-right: 22rpx;">楼层</text>
					<text>{{houseInfo.storey}}</text>
				</view>
				<view class="ess_lnfo_item" >
					<text  style="color: #3FB1FA;">咨询楼层</text>
				</view>
				<view class="ess_lnfo_item" >
					<text style="margin-right: 22rpx;">朝向</text>
					<text>{{houseInfo.direction}}</text>
				</view>
				<view class="ess_lnfo_item" >
					<text style="margin-right: 22rpx;">房屋类型</text>
					<text>{{houseInfo.house_type}}</text>
				</view>
				<view class="ess_lnfo_item" >
					<text style="margin-right: 22rpx;">装修</text>
					<text>{{houseInfo.renovation}}</text>
				</view>
				<view class="ess_lnfo_item" >
					<text style="margin-right: 22rpx;">年份</text>
					<text>{{houseInfo.year}}</text>
				</view>
				<view class="ess_lnfo_item" style="width: auto;">
					<text style="margin-right: 22rpx;">预算</text>
					<text>最低首付{{houseInfo.down_payments}}元</text>
				</view>
	
				<view class="ess_lnfo_item" >
					<text style="margin-right: 22rpx;">税费</text>
					<text style="color: #3FB1FA;">咨询详情税费</text>
				</view>
				<view class="ess_lnfo_item" >
				</view>
				<view class="ess_lnfo_item" style="width: auto;">
					<text style="margin-right: 22rpx;">小区</text>
					<text >{{houseInfo.community.community_address}}{{houseInfo.community.community_name}}</text>
				</view>
			</view>
			 
			<u-icon name="map" class="ess_info_map" color="#2EA6E4" size="48"></u-icon>
		</view>
		<!-- 细节展示 -->
		<view class="ess_display">
			<text class="ess_info_tit">细节展示</text>
			<view class="ess_display_con">
				<image :src="houseInfo.image" mode=""></image>
			</view>
		</view>
		<!-- 为您推荐 -->
		<view class="ess_recommend">
			<text class="ess_info_tit">为您推荐</text>
			<view class="ess_recommend_con">
				<houseList :houseInfoList="houseInfoList"></houseList>
				<uLi-load-more  :status="loadingType" :contentText="contentText"></uLi-load-more>
			</view>
		</view>
		<!-- 底部联系 -->
		<view class="see_footer">
			<view class="see_foo_fl">
				<image class="foo_fl_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/user.png'" mode=""></image>
				<text>{{houseInfo.call}}</text>
			</view>
			<text class="see_foo_fr" @click="callphone">
				联系他
			</text>
		</view>
	</view>
</template>

<script>
	import houseList from '../common/houseList.vue'
	import uLiLoadMore from "@/components/uLi-load-more/uLi-load-more.vue"
	var timer = null;
	export default {
		components:{
			houseList,
			uLiLoadMore
		},
		data() {
			return {  
				loadingText: '加载中...',
				 loadingType: 'more',//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				 contentText: {
				        contentdown:'上拉显示更多',
				        contentrefresh: '正在加载...',
				        contentnomore: '没有更多数据了',
				},
				page:1,
				limit:10,
				currentNum: 1,
				// 房屋详情
				detailsHouse: {}, 
				// 列表信息
				houseInfoList: [{
						area: null,
						community: {community_id:'' , community_name: ""},
						community_id: null,
						community_name: "",
						community_id: null,
						created_at: null,
						hall: null,
						house_type: "",
						id: null,
						image: "",
						money: "",
						room: null,
						title: "",
						toilet: null
					}],
				id:'',
				houseInfo:{
					area: '',
					call: "",
					city: "",
					community: {community_id: '', community_address: "", city: '', community_name: ""},
					community_id: '',
					created_at: "",
					describe: "",
					direction: "",
					down_payments: "",
					hall: '',
					hot: '',
					house_type: "",
					id: '',
					image: "",
					images: "",
					metre_money: '',
					money: "",
					phone: "",
					renovation: "",
					room: '',
					storey: "",
					title: "",
					toilet: '',
					updated_at: "",
					user_id: '',
					year: ""
				}
			};
		},
		onReachBottom: function() {
			console.log(1)
			var that=this;
				//触底的时候请求数据，即为上拉加载更多
				//为了更加清楚的看到效果，添加了定时器
				console.log('上拉')
		       if (timer != null) {
		           clearTimeout(timer);
		       }
		       timer = setTimeout(function() {
				   if (that.loadingType !== 'more') {//loadingType!=0;直接返回
				                  return false;
				    }
				    that.loadingType = 'loading';
				    uni.showNavigationBarLoading();//显示加载动画
				   that.page++;
				   console.log(that.page)
		           that.getbuyhouse()
		       }, 1000);
					
		},
		onLoad(option) {  
			// this.detailsHouse = option.info == '{}'? '': JSON.parse(option.info)
			console.log(option)
			this.id=option.id
			this.renderpage()
			this.getbuyhouse()
		},
		methods:{
			getbuyhouse(fx) {
				let data = {
					page: this.page,
					limit: this.limit,
					house_type: 'hot'
				}
				this.$http.get('Mini/circle/house/sell', data).then(res => {
					if (res.code == 200) {
						if(this.page>1){
							if(res.data.data.length>0){
								this.houseInfoList.push(...res.data.data)
							}else{
								this.loadingType = 'noMore';//将loadingType归0重置
								uni.hideNavigationBarLoading();//关闭加载动画
							}
						}else{
							this.houseInfoList = []
							this.houseInfoList=res.data.data
							uni.showNavigationBarLoading();
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						}
					}else{
						uni.hideNavigationBarLoading();//关闭加载动画
						 uni.showNavigationBarLoading();
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					}
					if(fx){
						fx()
					}
				})
			},
			changeSwiper(e){ 
				this.currentNum = +e.detail.current + 1
			},
			callphone(){
				var that=this
				uni.makePhoneCall({
				    phoneNumber: that.houseInfo.phone
				});
			},
			renderpage(){
					this.$mrequest2({
						url:'Mini/circle/house/sell/'+this.id,
						method:'GET'
					}
					).then((res)=>{
						console.log(res.data.images)
						res.data.imgarr=res.data.images.split(',')
						this.houseInfo=res.data
						console.log(this.houseInfo.imgarr)
					})
			}
			
		}
	}
</script>

<style lang="scss">
	.house_details_sale { 
		padding-bottom: 90rpx;
		background-color: #f7f8f9;
		.ess_info_tit{
			height: 120rpx;
			line-height: 120rpx;
			font-size: 38rpx;
			font-weight: 700;
		}
		.sale_banner {
			margin-top: 20rpx;
			position: relative;
			height: 406rpx;
			.swiper{
				height: 100%;
				.swiper-item{
					height: 100%;
				}
			}
			.sale_page{
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				width: 100rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				color: #AFAFAF;
				background: #3E3E3E;
				opacity: 0.8;
				border-radius: 22rpx;
			
			}
		}
		.sale_data{
			padding: 40rpx 32rpx;
			margin-top: 16rpx;
			height: 429rpx;
			background-color: #fff;
			.sa_data_tit{
				font-size: 39rpx;
				font-weight: 700; 
			}
			.sa_data_notice{
				padding: 0 25rpx;
				margin: 24rpx 0;
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #7F7F7F; 
				background: #F7F8F9; 
				border-radius: 10rpx;
			}
			.sa_tag_info{
				display: flex; 
				height: 140rpx; 
				.sa_tag_info_item{
					flex: 1;
					text-align: center;
					& text:nth-child(1){
						display: block; 
						font-size: 37rpx;
						color: #FF6716;
						font-weight: 700;
					}
				}
			}
		}
		.essential_info{
			position: relative;
			margin: 20rpx 0;
			padding: 34rpx 30rpx; 
			background-color: #fff; 
			.ess_lnfo_list{
				display: flex;
				flex-wrap: wrap;
				.ess_lnfo_item{
					margin: 10rpx 0;
					width: 50%;
					font-size: 28rpx;
				}
			}
			 
			.ess_info_map{
				position: absolute;
				right: 40rpx;
				bottom: 40rpx;
				
			}
		}
		.ess_display{
			padding: 0 30rpx;
			margin-top: 16rpx;
			height: 587rpx;
			background-color: #fff; 
			.ess_display_con{
				height: 406rpx;
			}
		}
		.ess_recommend{
			padding: 0 30rpx;
			background-color: #fff;
		}
		.see_footer{
			position: fixed;
			width: 100%;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 129rpx;
			line-height: 129rpx;
			background-color: #fff;
			.see_foo_fl{
				display: flex;
				.foo_fl_img{
					margin: auto 28rpx auto auto; 
					width: 101rpx;
					height: 101rpx;
				}
			}
			.see_foo_fr{
				margin: auto 0;
				width: 196rpx;
				height: 81rpx;
				line-height: 81rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				background: #FF6716;
				border-radius: 10rpx;
			}
		}
	}
</style>
